<template>
  <div>

    <!-- 面包屑导航条 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>数据统计</el-breadcrumb-item>
      <el-breadcrumb-item>数据报表</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card>
      <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
      <div id="main" style="width: 100%;height:100%;">
        <!--工具条-->
        <el-row>
              
                <!--工具条-->
                <el-form :inline="true" :model="searchfrom" class="toolbar" label-position="right" label-width="70px">
                    <el-row>
                       
                        <el-form-item >
                            <el-date-picker
                            v-model="value1"
                            type="date"
                            placeholder="选择日期">
                            </el-date-picker>
                        </el-form-item>
                       
                        <el-form-item label="">
                            <el-button @click="searchUserList" type="success" style="width: 170px">查询</el-button>
                        </el-form-item>
                    </el-row>
                </el-form>
            </el-row>
         <el-card>
           <el-table :data="dataList" highlight-current-row v-loading="gridLoading" class="grid" style="width: 100%；">
                <el-table-column label="id" prop="id" width="80">
                </el-table-column>
                <el-table-column label="姓名" prop="nickName" >
                </el-table-column>
                 <el-table-column label="数量" prop="money" >
                </el-table-column>
                 <!-- <el-table-column label="种类" prop="coinName" >
                </el-table-column> -->
                 <el-table-column label="账号状态" prop="status" >
                     <template slot-scope="scope">
                        <el-tag :type="scope.row.status == 1 ? 'success':'danger'">{{scope.row.status == 1 ? '正常' : '不正常'}}</el-tag>
                    </template>
                </el-table-column>
                 <el-table-column label="手机号" prop="mobile" >
                </el-table-column>
                 <el-table-column label="时间" prop="updateTime" >
                </el-table-column>
                <el-table-column label="数据" prop="updateTime" >
                    <!-- <el-tag type="success"></el-tag> -->
                    <template slot-scope="scope">
                        <el-tag :type="scope.row.normal == true ? 'success':'danger'">{{scope.row.normal == true ? '正常' : '不正常'}}</el-tag>
                    </template>
                </el-table-column>
                 <el-table-column label="操作" >
                  <template slot-scope="scope">
                    <el-button size="small" @click="check(scope.row)">查看</el-button>
                  </template>
                </el-table-column>
           </el-table>
           
    <!-- 分页区域 -->
    <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryinfo.pagenum" :page-sizes="[10, 15, 20, 30]" :page-size="queryinfo.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>
         </el-card>
      </div>
    </el-card>
    <el-dialog title="收货地址" :visible.sync="dialogTableVisible">
      <el-table :data="gridData">
        <!-- <el-table-column property="userId" label="时间" width="150"></el-table-column> -->
        <el-table-column property="createTime" label="时间" width="150"></el-table-column>
        <el-table-column property="billDescription" label="类别" ></el-table-column>
        <el-table-column property="money" label="数量（CY）" width="100"></el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
// import mix from './Report-mixins.js'
export default {
  // mixins: [mix]

  data() {
    let compareDate = (time, form, txt, type) => {
      let _cp1 = time.getTime() >= Date.now() - 3600 * 1000 * 24;
      let _cp2 = false;
      let _input = this[form][txt];
      if (_input) {
        let _time = Date.parse(new Date(_input));
        if (
          (type == "s" && time.getTime() > _time) ||
          (type == "e" && time.getTime() < _time)
        ) {
          _cp2 = true;
        }
      }
      return _cp1 || _cp2;
    };
    return {
      // 查询参数
      value1: "",
      pickerOptions1: {
        disabledDate(time) {
          return compareDate(time, "searchForm", "endDate", "s");
        }
      },
      queryinfo: {
        queryString: ""
        // pagenum: 1,
        // pagesize: 10
      },
      total: 0,
      searchForm: {
        queryString: "",

        pageNo: 1,
        pageSize: 10
      },
      money: {
        pageNo: 1,
        pageSize: 10
      },
      dataList: [],
      dialogTableVisible: false,
      gridData: []
    };
  },
  created() {
    // this.refreshData();
    var timestamp = new Date().getTime();
    // console.log(timestamp);//打印当前时间戳
    // console.log(timestamp-24*60*60*1000);//当前时间戳（毫秒） - 1天毫秒数 = 前一天时间戳
    // this.formatTime(new Date());
    this.searchForm.queryString = this.formatUnixDateTime(timestamp - 24 * 60 * 60 * 1000);
  },
  mounted() {
    this.refreshData()
  },
  methods: {
    searchUserList() {
      console.log(this.searchForm);
      var timestamp = new Date().getTime();
      // DataUtil.formatTime(this.searchForm.startDay)|| DataUtil.formatTime(new Date()),
      this.searchForm.queryString =
        this.formatTime(this.value1)
      // console.log(this.searchForm.queryString)
    },
    formatUnixDateTime(time) {
      if (time == null) {
        return "";
      }
      let timeStamp = new Date(time);
      let time_p =
        timeStamp.getFullYear() +
        "-0" +
        (timeStamp.getMonth() + 1) +
        "-" +
        timeStamp.getDate();
      // this.refreshData(time_p);
      console.log(time_p);
      // return
    },
    formatTime(dateTime, format = "yyyy-MM-dd") {
      if (!dateTime) return dateTime;
      let args = {
        "M+": dateTime.getMonth() + 1,
        "d+": dateTime.getDate(),
        "h+": dateTime.getHours(),
        "m+": dateTime.getMinutes(),
        "s+": dateTime.getSeconds(),
        "q+": Math.floor((dateTime.getMonth() + 3) / 3), //quarter
        S: dateTime.getMilliseconds()
      };
      if (/(y+)/.test(format))
        format = format.replace(
          RegExp.$1,
          (dateTime.getFullYear() + "").substr(4 - RegExp.$1.length)
        );
      for (var i in args) {
        let n = args[i];
        if (new RegExp("(" + i + ")").test(format))
          format = format.replace(
            RegExp.$1,
            RegExp.$1.length == 1 ? n : ("00" + n).substr(("" + n).length)
          );
      }
      console.log(format);
      return format;
      // this.refreshData(format);
    },
    check(row) {
      console.log(row);
      this.dialogTableVisible = true;
      let parmes = {
        queryString: row.updateTime,
        userId: row.userId,
        queryId:1 
      };
      this.$http.post("/manage/userCoin/bill", parmes).then(res => {
        // console.log(res);
        if (res.data.status == 1) {
          this.gridData = res.data.data;
        } else {
        }
      });
    },
    search() {
      this.queryinfo.pagenum = 1;
      this.refreshData();
    },
    refreshData() {
      this.$http.post('/manage/userCoin/errCoinListByDate',this.searchForm).then(res => {
         this.dataList = res.data;
        this.total = res.data.total
      })
      // const { data: res } = await this.$http.post(
      //   "/manage/userCoin/errCoinListByDate",
      //  this.searchForm
      // ); //, { params: this.queryinfo }

      // console.log(res);
      // // this.number = res.data;
     
    },
    // 监听 pageSize 的变化，并立即获取最新的数据
    handleSizeChange(newSize) {
      this.queryinfo.pagesize = newSize;
      this.getGoodsList();
    },
    // 监听 pageNum 的变化，并立即获取最新的数据
    handleCurrentChange(newPage) {
      this.queryinfo.pagenum = newPage;
      this.getGoodsList();
    }
  }
};
</script>

<style lang="less" scoped>
</style>
